<!-- Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. -->

<div class="ms-CommandBar">
  <div class="ms-CommandBarSearch">
    <a class="ms-CommandBarSearch-iconWrapper ms-CommandBarSearch-iconArrowWrapper">
      <i class="ms-Icon ms-Icon--arrowLeft"></i>
    </a>
    <input class="ms-CommandBarSearch-input" type="text" />
    <a class="ms-CommandBarSearch-iconWrapper ms-CommandBarSearch-iconSearchWrapper" href="javascript:;">
      <i class="ms-Icon ms-Icon--search"></i>
    </a>
    <a class="ms-CommandBarSearch-iconWrapper ms-CommandBarSearch-iconClearWrapper ms-font-s" href="javascript:;">
      <i class="ms-Icon ms-Icon--x"></i>
    </a>
  </div>  
  <div class="ms-CommandBar-sideCommands"> 
    <div class="ms-CommandBarItem ms-CommandBarItem--iconOnly">
        <div class="ms-CommandBarItem-linkWrapper">
            <div class="ms-CommandBarItem-link">
                <span class="ms-CommandBarItem-icon ms-Icon ms-Icon--circleFilled"></span>
                <span class="ms-CommandBarItem-commandText ms-font-m ms-font-weight-regular">Stars</span>
                <i class="ms-CommandBarItem-chevronDown ms-Icon ms-Icon--chevronDown"></i>
            </div>
        </div>
    </div>
    <div class="ms-CommandBarItem">
      <div class="ms-CommandBarItem-linkWrapper">
        <div class="ms-CommandBarItem-link">
          <span class="ms-CommandBarItem-icon ms-Icon ms-Icon--circleFilled"></span>
          <span class="ms-CommandBarItem-commandText ms-font-m ms-font-weight-regular">Stars</span>
          <i class="ms-CommandBarItem-chevronDown ms-Icon ms-Icon--chevronDown"></i>
        </div>
      </div>
    </div>
    <div class="ms-CommandBarItem">
      <div class="ms-CommandBarItem-linkWrapper">
        <div class="ms-CommandBarItem-link">
          <span class="ms-CommandBarItem-icon ms-Icon ms-Icon--circleFilled"></span>
          <span class="ms-CommandBarItem-commandText ms-font-m ms-font-weight-regular">Stars</span>
          <i class="ms-CommandBarItem-chevronDown ms-Icon ms-Icon--chevronDown"></i>
        </div>
      </div>
    </div>
  </div>
  <div class="ms-CommandBar-mainArea">
    <div class="ms-CommandBarItem">
      <div class="ms-CommandBarItem-linkWrapper">
        <div class="ms-CommandBarItem-link">
          <span class="ms-CommandBarItem-icon ms-Icon ms-Icon--star"></span>
          <span class="ms-CommandBarItem-commandText ms-font-m ms-font-weight-regular">Stars</span>
          <i class="ms-CommandBarItem-chevronDown ms-Icon ms-Icon--chevronDown"></i>
        </div>
      </div>
    </div>
    <div class="ms-CommandBarItem">
      <div class="ms-CommandBarItem-linkWrapper">
        <div class="ms-CommandBarItem-link">
          <span class="ms-CommandBarItem-icon ms-Icon ms-Icon--save"></span>
          <span class="ms-CommandBarItem-commandText ms-font-m ms-font-weight-regular">Documents</span>
           <i class="ms-CommandBarItem-chevronDown ms-Icon ms-Icon--chevronDown"></i>
        </div>
      </div>
    </div>
    <div class="ms-CommandBarItem">
      <div class="ms-CommandBarItem-linkWrapper">
        <div class="ms-CommandBarItem-link">
          <span class="ms-CommandBarItem-icon ms-Icon ms-Icon--flag"></span>
          <span class="ms-CommandBarItem-commandText ms-font-m ms-font-weight-regular">Flags</span>
          <i class="ms-CommandBarItem-chevronDown ms-Icon ms-Icon--chevronDown"></i>
        </div>
      </div>
    </div>
    <div class="ms-CommandBarItem">
      <div class="ms-CommandBarItem-linkWrapper">
        <div class="ms-CommandBarItem-link">
          <span class="ms-CommandBarItem-icon ms-Icon ms-Icon--smiley"></span>
          <span class="ms-CommandBarItem-commandText ms-font-m ms-font-weight-regular">Smiley</span>
          <i class="ms-CommandBarItem-chevronDown ms-Icon ms-Icon--chevronDown"></i>
        </div>
      </div>
    </div>
    <div class="ms-CommandBarItem">
      <div class="ms-CommandBarItem-linkWrapper">
        <div class="ms-CommandBarItem-link">
          <span class="ms-CommandBarItem-icon ms-Icon ms-Icon--officeStore"></span>
          <span class="ms-CommandBarItem-commandText ms-font-m ms-font-weight-regular">Office Store</span>
          <i class="ms-CommandBarItem-chevronDown ms-Icon ms-Icon--chevronDown"></i>
        </div>
      </div>
    </div>
    <div class="ms-CommandBarItem">
      <div class="ms-CommandBarItem-linkWrapper">
        <div class="ms-CommandBarItem-link">
          <span class="ms-CommandBarItem-icon ms-Icon ms-Icon--lync"></span>
          <span class="ms-CommandBarItem-commandText ms-font-m ms-font-weight-regular">Lync</span>
          <i class="ms-CommandBarItem-chevronDown ms-Icon ms-Icon--chevronDown"></i>
        </div>
      </div>
    </div>
    <!-- Overflow Command -->
    <div class="ms-CommandBarItem ms-CommandBarItem--iconOnly ms-CommandBarItem-overflow">
      <div class="ms-CommandBarItem-linkWrapper">
        <div class="ms-CommandBarItem-link">
          <span class="ms-CommandBarItem-icon ms-Icon ms-Icon--ellipsis"></span>
          <span class="ms-CommandBarItem-commandText ms-font-m ms-font-weight-regular">Ellipsis</span>
          <i class="ms-CommandBarItem-chevronDown ms-Icon ms-Icon--chevronDown"></i>
        </div>
      </div>
      <ul class="ms-CommandBar-overflowMenu ms-ContextualMenu"></ul>
    </div>
    <!-- End Overflow Command -->
  </div>
</div>
